window.onload=function(){
	
	let obj = parseQuery(location.search.slice(1));
	console.log(obj)
	let goodsId = obj.goodsId;
	let brandId = obj.brandId;
	$(document).ajaxSend(function(event,xhr){
		xhr.setRequestHeader("token",localStorage.getItem("token"));
		xhr.setRequestHeader("x-requested-with","XMLHttpRequest")
	})
	//加载页面
	$.get(goodsApi,{goodsId},(res)=>{
		console.log(res.info)
		let itemObj = res.info
		html = `
				<!-- 轮播图 -->
				<div class="pMainImg">
					<div class="swiper-container">
						<a href="productstList.html?goodsId=${goodsId}&brandId=${brandId}">&#xe84f;</a>
						<div class="swiper-wrapper">
							<div class="swiper-slide"><img src="${res.info.goodsImgUrl}" alt=""></div>
							<div class="swiper-slide"><img src="${res.info.goodsImgUrl}" ></div>
							<div class="swiper-slide"><img src="${res.info.goodsImgUrl}" ></div>
							<div class="swiper-slide"><img src="${res.info.goodsImgUrl}" ></div>
							<div class="swiper-slide"><img src="${res.info.goodsImgUrl}" ></div>
						</div>
						<!-- 如果需要分页器 -->
						<div class="swiper-pagination"></div>
					</div>
				</div>
				<section class="content">
					
					<!-- **********pdesc************** -->
					<section class="mcontent">
						<dl class="pdesc">
							<dt class="pname">${res.info.goodsMsg}</dt>
							<dd class="pname2">${res.info.goodsName}</dd>
							<dd class="pprice">¥${res.info.minPrice}</dd>
						</dl>
						<section class="button">
							<dl>
								<dt class="myLike" style="color:black;">&#xe6c8;</dt>
								<dd>收藏</dd>
							</dl>
							<dl>
								<dt>&#xe70f;</dt>
								<dd>视频</dd>
							</dl>
							<dl class="show-share">
								<dt style="font-family: taolsw;font-size:0.44rem;margin-bottom:0rem;">&#xe600;</dt>
								<dd>分享</dd>
							</dl>
						</section>
						
					</section>
					<div class="news">
						<div class="small-pic"></div>
						<span>${res.info.goodsMsg}</span>
					</div>
					
					<!-- ********小公告********** -->
					<div class="links">
						<a href="">
							PRODUCT INFORMATION 产品信息
							<span>&#xe84e;</span>
						</a>
						<a href="">
							SIZE GUIDE 尺码指南
							<span>&#xe84e;</span>
						</a>
					</div>
					
					<!-- ******商品详情******* -->
					<section class="story">
						<span class="pimg"></span>
						<span class="plogo"></span>
						<div class="article">
							<h4>
								品牌及设计师简介
							</h4>
							<p>
			                阿迪达斯是由吕佳娜和王菲联合创立，以名字组合命名的原创设计师品牌。推崇多元主义，擅长生活中获取灵感，不守旧,爱颠覆，就像一场永不停止的灵魂crazy!大胆风趣地创作图案和服装廓形是阿迪达斯表达态度的方式。让每个人发现自身的独特之处，【one me one chic】是品牌的最终诠释，玩起来，做自己！
							</p>
						</div>
					</section>
					
					<!-- *************猜你喜欢************* -->
					<h4 class="favorite-title">猜你喜欢 <span>15件商品</span></h4>
					<section class="favorite">
						<div class="moreproducts">
							<dl>
								<span class="more-pic">
									<img src="img/xq_p2.png" >
								</span>
								<dt>NANAWANG SEXY</dt>
								<dd>刺绣设计毛呢短裤裤裙</dd>
								<dd>¥399 <span class="myLike" style="color:black;">&#xe6c8;</span></dd>
							</dl>
							<dl>
								<span class="more-pic">
									<img src="img/xq_p3.png" alt="">
								</span>
								<dt>NANAWANG</dt>
								<dd>刺绣白色毛衣</dd>
								<dd>¥399 <span class="myLike" style="color:black;">&#xe6c8;</span></dd>
							</dl>
							<dl>
								<span class="more-pic">
									<img src="img/xq_p4.png" alt="">
								</span>
								<dt>NANAWANG</dt>
								<dd>带帽黄色卫衣</dd>
								<dd>¥399 <span class="myLike" style="color:black;">&#xe6c8;</span></dd>
							</dl>
						</div>
					</section>
				</section>
		`
		$('#cart-mainItem')[0].innerHTML = html;
		
		//初始化购物车添加按钮
		let html2 = `
			<button data-id="${res.info.goodsId}">加入购物车</button>
			<button data-id="${res.info.goodsId}">立即购买</button>
		`
		$('#cart-footer')[0].innerHTML = html2
		
		let html3 = `
			<a data-id="${res.info.goodsId}" href="javascript:;" class="add">加入购物车</a>
			<a data-id="${res.info.goodsId}" href="javascript:;" class="buy">立即购买</a>
		`
		$('.addcar')[0].innerHTML = html3
		
		let filter=document.querySelector('.filter')
		let cartMainItem=document.querySelector('#cart-mainItem')
		//商品详情页
		let cartBtns = $('#cart-footer button')
		console.log(cartBtns)
		
		
		function hasProducts(){
			cartBtns[0].innerHTML = '已加入'
			cartBtns[0].style.background='red';
			cartBtns[0].style.borderWidth=0;
			cartBtns[0].style.color="#fff";
			$('.addcar a')[0].style.background='red';
			$('.addcar a')[0].innerHTML = '已加入'
			$('.addcar a')[0].style.borderWidth=0;
			$('.addcar a')[0].style.color="#fff";
			$('.productNum')[0].innerHTML = 1;
			$('.productNum')[0].style.display="block";
			
			
		}
		
		function hasNoProduct(){
			cartBtns[0].innerHTML = '添加购物车'
			cartBtns[0].style.background='';
			cartBtns[0].style.borderWidth='1px';
			cartBtns[0].style.color="#999";
			$('.addcar a')[0].style.background='';
			$('.addcar a')[0].innerHTML = '添加购物车'
			$('.addcar a')[0].style.borderWidth='1px';
			$('.addcar a')[0].style.color="#999";
			$('.productNum')[0].innerHTML = '0'
			$('.productNum')[0].style.display="none";
		}
		
		
		//更新按钮
		function reFresh(){
			if($('.productNum')[0].innerHTML == 1){
				hasProducts()
			}else{
				hasNoProduct()
			}
		}
		
		
		
		
		
		//点击购买
		let addCartAlert = $('.choose')
		cartBtns[1].onclick=function(){
			console.log('点击了购买按钮')
			filter.style.display='block'
			cartMainItem.style.overflow='hidden'
			addCartAlert.animate({
				bottom: 0,
			},400)
			//立即购买
			let buyBtn = document.querySelector('.buy')
			buyBtn.onclick=function(){
				if(colorShow.innerHTML == '请选择颜色'||sizeShow.innerHTML == '请选择尺码'){
					alert('请选择颜色或尺码')
				}else{
					location.href='pay.html'
				}
			}
		}
		
		//添加颜色，尺码选择
		let colorsArr = res.info.colorList
		let sizesArr = res.info.sizeList
		console.log(colorsArr)
		console.log(sizesArr)
		let html4 = '';
		let html5 = '';
		for(let i=0;i<colorsArr.length;i++){
			html4 += `
				<li data-id="${colorsArr[i].colorId}">${colorsArr[i].colorName}</li>
			`
			html5 += `
				<li data-id="${sizesArr[i].sizeId}">${sizesArr[i].sizeName}</li>
			`
		}
		$('.colorSub')[0].innerHTML = html4
		$('.sizeSub')[0].innerHTML = html5
		//选择颜色
		let colorSelectBtn = document.querySelector('.selectBtn1')
		let colorShow = document.querySelector('.color')
		colorSelectBtn.onclick=function(e){
			if($('.colorSub')[0].style.display == 'block'){
				$('.colorSub')[0].style.display="none"
				if(e.target.parentNode.className == 'colorSub select'){
					e.target.parentNode.style.display='none'
					let colorId = e.target.getAttribute('data-id')
					localStorage.setItem('colorId',colorId)
					let tmp = e.target.innerHTML;
					colorShow.innerHTML = tmp;
				}else{
					e.target.parentNode.style.display='block'
				}
			}else{
				$('.colorSub')[0].style.display="block"
			}
		}
		
		//选择尺码按钮
		let sizeSelectBtn = document.querySelector('.selectBtn2')
		let sizeShow = document.querySelector('.size')
		sizeSelectBtn.onclick=function(e){
			if($('.sizeSub')[0].style.display == 'block'){
				$('.sizeSub')[0].style.display="none"
				if(e.target.parentNode.className == 'sizeSub select'){
					console.log(e.target.parentNode)
					e.target.parentNode.style.display='none'
					let sizeId = e.target.getAttribute('data-id')
					localStorage.setItem('sizeId',sizeId)
					let tmp = e.target.innerHTML;
					sizeShow.innerHTML = tmp;
				}else{
					e.target.parentNode.style.display='block'
				}
			}else{
				$('.sizeSub')[0].style.display="block"
			}
			singlePrice()
		}
		function singlePrice(){
			if($('.color')[0].innerHTML!='请选择颜色'&&$('.size')[0].innerHTML!='请选择尺码'){
				let colorId = localStorage.getItem('colorId')
				let sizeId = localStorage.getItem('sizeId')
				$.get(goodsPriceId,{colorId:colorId,sizeId:sizeId},(res)=>{
					let goodsTypeId = res.info.goodsTypeId
					$.get(showCartApi,(res)=>{
						if(res.info.length!=0){
							console.log('购物车里有商品')
							let spArr = res.info;
							let targetObj = spArr.find(v=>v.goodsType.goodsTypeId == goodsTypeId)
							if(targetObj){
								console.log('购物车里已经有商品了')
								hasProducts()
							}else{
								hasNoProduct()
							}
						}else{
							console.log('购物车里没有商品')
							hasNoProduct()
						}
						
					})
					let html7 = `
						<div class="tuichu">&#xe65a;</div>
						<div class="pimg">
							<img src="img/gwc_b1.png">
						</div>
						<dl>
							<dt>${itemObj.goodsMsg}</dt>
							<dd>${itemObj.goodsName}</dd>
							<dd>¥${res.info.price}</dd>
							<dd>${res.info.inventoryNum}</dd>
						</dl>
					`
					$('.exit')[0].innerHTML = html7
					
					localStorage.setItem('goodsTypeId',goodsTypeId)
					back()
				})
			}else{
				//商品大致信息
				let html7 = `
					<div class="tuichu">&#xe65a;</div>
					<div class="pimg">
						<img src="img/gwc_b1.png">
					</div>
					<dl>
						<dt>${itemObj.goodsMsg}</dt>
						<dd>${itemObj.goodsName}</dd>
						<dd>¥?</dd>
						<dd>请先选择颜色和尺码</dd>
					</dl>
				`
				$('.exit')[0].innerHTML = html7
				back()
			}
		}
		
		
		//控制物品数量按钮
		let html6 = `
			<span data-id="${localStorage.getItem('goodsId')}" class="subBtn">-</span>
			<span data-id="${localStorage.getItem('goodsId')}" class="show">1</span>
			<span data-id="${localStorage.getItem('goodsId')}" class="addBtn">+</span>
		`
		$('.num')[0].innerHTML = html6
		//改变数量
		let buttons = $('.slectList .num span')
		console.log(buttons)
		let addBtn = buttons[2]
		let showNum = buttons[1]
		let subBtn = buttons[0]

		addBtn.onclick=function(){
			console.log('点击了增加按钮')
			showNum.innerHTML = parseInt(showNum.innerHTML)+1
		}
		subBtn.onclick=function(){
			
			console.log('点击了减少按钮')
			if(parseInt(showNum.innerHTML)==1){
				alert('商品数量不能为0')
				return;
			}
			showNum.innerHTML = parseInt(showNum.innerHTML)-1
		}
		
		
		
		//增加
		// $.post(addCartApi,{goodsTypeId:2,goodsNum:30},(res)=>{
		// 	console.log(res)
		// })
		
		//删除购物车商品接口
		// $.post(deleteCartApi,{goodsTypeId:1},(res)=>{
		// 	console.log(res)
		// })
		
		
		
		//页面初始化
		//单价计算
		singlePrice()
		
		//判断  两种状态 已添加购物车   未添加购物车
		$.get(showGoodsApi,(res)=>{
			let productsArr = res.info
			console.log(productsArr)
			let pid = localStorage.getItem('goodsTypeId')
			let targetObj = productsArr.find(v=>v.goodsType.goodsTypeId == pid)
			if(targetObj==undefined){
				console.log('购物车里没有此类商品')
				hasNoProduct()
			}else{
				console.log('购物车里有此类商品')
				hasProducts()
				$('.color')[0].innerHTML = targetObj.goodsType.color.colorName
				$('.size')[0].innerHTML = targetObj.goodsType.size.sizeName
				$('.show')[0].innerHTML = targetObj.goodsNum
				let colorId = targetObj.goodsType.colorId;
				let sizeId = targetObj.goodsType.sizeId;
				$.get(goodsPriceId,{colorId:colorId,sizeId:sizeId},(res)=>{
					console.log(res)
					let html7 = `
						<div class="tuichu">&#xe65a;</div>
						<div class="pimg">
							<img src="img/gwc_b1.png">
						</div>
						<dl>
							<dt>${itemObj.goodsMsg}</dt>
							<dd>${itemObj.goodsName}</dd>
							<dd>¥${res.info.price}</dd>
							<dd>${res.info.inventoryNum}</dd>
						</dl>
					`
					$('.exit')[0].innerHTML = html7
					let goodsTypeId = res.info.goodsTypeId
					localStorage.setItem('goodsTypeId',goodsTypeId)
					back()
				})
			}
		})
		
		
		
		
		
		
		//返回操作
		function back(){
			let goBackButtons = $('.tuichu')
			goBackButtons[0].onclick=function(){
				console.log('点击了退出按钮')
				filter.style.display='none'
				cartMainItem.style.overflow='auto'
				console.log(addCartAlert)
				addCartAlert[0].style.bottom = '-6rem'
			}
		}
		
		
		
		//分享弹窗
		var mySwiper = new Swiper ('.swiper-container', {
		  direction: 'horizontal', // 垂直切换选项
		  loop: true, // 循环模式选项
		  
		  // 如果需要分页器
		  pagination: {
		    el: '.swiper-pagination',
			  
			bulletActiveClass: 'my-bullet-active',
		  },
		  
		  // 如果需要前进后退按钮
		  navigation: {
		    nextEl: '.swiper-button-next',
		    prevEl: '.swiper-button-prev',
		  },
		  
		 autoplay:{
			   delay:1500,
		 }
		})     
		  
		  
		 /************分享**************/
		let showShare=document.querySelector('.button .show-share')
		let container=document.querySelector('.container')
		let alertShare=document.querySelector('.alertwindow')
		 showShare.onclick=function(){
			filter.style.display='block'
			alertShare.style.display='block'
			cartMainItem.style.overflow='hidden'
			$('.alertwindow').animate({
				bottom: 0,
			},400)
		  }
		let quXiao=document.querySelector('.quxiao')
		
		quXiao.onclick=function(){
			$('.alertwindow').animate({
				bottom: '-2rem',
			},400)
			filter.style.display='none'
			cartMainItem.style.overflow='auto'
		}
		  
		  
		//点赞
		let myLikeButtons = document.querySelectorAll('.myLike')
		for(let i=0;i<myLikeButtons.length;i++){
			myLikeButtons[i].onclick=function(){
				if(this.style.color == 'black'){
					this.innerHTML = '&#xe85d;'
					this.style.color = 'red'
				}else{
					this.innerHTML = '&#xe6c8;'
					this.style.color = 'black'
				}
			}
		}
		
		
		// 收藏购物车
		function addCarts(el){
			console.log($('.show')[0].innerHTML)
			
			el.onclick=function(){
				let pnum = parseInt($('.show')[0].innerHTML)
				console.log($('.color'))
				if($('.color')[0].innerHTML == '请选择颜色'||$('.size')[0].innerHTML == '请选择尺码'){
					alert('请选择颜色和尺码')
				}else{
					$.get(showCartApi,(res)=>{
						let productsArr = res.info
						console.log(productsArr)
						let pid = localStorage.getItem('goodsTypeId')
						let targetObj = productsArr.find(v=>v.goodsType.goodsTypeId == pid)
						console.log(targetObj)
					
						if(targetObj){
							console.log('购物车已经有此商品了')
							pnum = targetObj.goodsNum
							console.log(pnum)
							$('.productNum')[0].innerHTML = '0'
							$('.productNum')[0].style.display="none";
							$.post(deleteCartApi,{goodsTypeId:localStorage.getItem('goodsTypeId')},(res)=>{
								alert(res.info)
							})
							reFresh()
							return;
						}else{
							console.log('购物车没有此商品了')
							$('.productNum')[0].innerHTML = 1
							$('.productNum')[0].style.display="block";
							// 增加
							console.log(localStorage.getItem('goodsTypeId'))
							$.post(addCartApi,{goodsTypeId:localStorage.getItem('goodsTypeId'),goodsNum:pnum},(res)=>{
								alert(res.info)
							})
							reFresh()
						}
					})
				}
			}
		}
		//加入购物车
		addCarts(cartBtns[0])
		addCarts($('.addcar a')[0])
	})
	
	
}